<template>
  <div class="form">
    <Row>
      <Col span="6">
      <Form :model="formItem" :label-width="80">
        <FormItem label="权限名称">
          <Input v-model="formItem.name" placeholder="输入权限名…"></Input>
        </FormItem>
        <FormItem label="权限介绍">
          <Input type="textarea" v-model="formItem.intro" placeholder="输入权限介绍…"></Input>
        </FormItem>
        <FormItem class="button">
          <Button type="ghost" @click="handleReset('formItem')" style="margin-left: 8px">清除</Button>
          <Button type="primary" @click="handleSubmit('formItem')">新增</Button>
        </FormItem>
      </Form>
      </Col>
    </Row>
  </div>
</template>
<style>
  .form {
    margin-top: 30px;
  }

  .button {
    float: right;
  }

  .button button {
    margin-right: 20px;
  }
</style>

<script>
  export default {
    data() {
      return {
        formItem: {
          name: null,
          intro: null
        }
      };
    },
    methods: {
      handleSubmit() {
        let that = this;
        if (this.formItem.name == null || this.formItem.intro == null) {
          this.$Message.warning("权限名称和介绍不能为空，请重新输入。");
          return false;
        } else if (this.formItem.name.length < 3) {
          this.$Message.warning("权限名称不能少于 3位，请重新输入。");
          return false;
        } else if (this.formItem.intro.length < 5) {
          this.$Message.warning("权限介绍不能少于 5位，请重新输入。");
          return false;
        } else {
          this.$axios.post("backend/permission", this.formItem, function (res) {
            if (res == 3) {
              that.$Message.warning("该权限名称已存在，请重新输入。");
            } else if (res == 0) {
              that.$Message.error("权限不够，新增权限失败！");
            } else if (res == 1) {
              that.$Message.success("新增权限成功。");
            }
          });
        }
      },
      handleReset() {
        this.formItem = {};
      }
    },
    mounted() {
      this.$store.commit("bread", "新增权限");
      // this.getPermission();
    }
  };

</script>
